<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="梅子">
    <title></title>
<style>
  a{
      color: inherit;
      font-size: inherit;
      text-decoration: none;
      
  }
  *{
      box-sizing: border-box;
  }
  .box{
      display: flex;
  }
  .box>div{
      margin-left: 10px;
      position: relative;
  }
  a{
      display: inline-block;
      width: 19px;
      height: 19px;
      background-image: url(star.png);
  }
  a.active{
      background-position: 0 -28px;
  }
  .box>div:hover .pingjia{
      display: block;
  }.pingjia{
      border: 1px solid red;
      font-size: 12px;
      position: absolute;
      left:0;
      top: 20px;
      width: 120px;
      display: none;
  }
 


</style>
</head>
<body>
    <div class="box">
        <span>宝贝描述和相符</span>
        <div>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <div class="pingjia">五星好评</div> 
        </div>
        <span class="result"></span>
    </div>
    <script src="jquery.js"></script>
</body>
</html>
<script>
    //jquery写星级评分
    var count;
    function showStart(count){
         $('a').each(function(){
        if($(this).index()<count){
            $(this).addClass('active');
        }else{
            $(this).removeClass('active')
        }
    })
    }
   
    var msg = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
    ];
    //记录分数
    var score;
   
    $('a').hover(function(){
        showStart($(this).index()+1)
        var left=this.offsetLeft-50;
        $('.pingjia').css('left',$(this).position.left);
        $('.pingjia').html('<strong style="color:red">'+($(this).index()+1)+'分'+msg[$(this).index()].split('|')[0]+'</strong><br>'+msg[$(this).index()].split('|')[1]);

    })
     $('a').click(function(){
        score=$(this).index()+1;
         $('.result').html('<strong style="color:red">'+score+'分</strong>'+msg[$(this).index()].split('|')[1])
    })
$('a').mouseout(function(){
        showStart(score)
    })
   

   
</script> 































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































  